<template>
    <div>
        <a-input
            class="add-label-input"
            v-model="name"
            @keyup.enter.native="addLabel"
            :placeholder="placeholder"
            :maxLength="maxLength"
        >
            <a-button slot="addonAfter" :icon="isIcon" @click="addLabel" :disabled="nameList.length >= max">
                添加标签
            </a-button>
        </a-input>
        <p class="tips" v-if="isShow">
            {{ tipText }}
        </p>
        <badge-delete-box :list="nameList" @deleteItem="deleteItem"></badge-delete-box>
    </div>
</template>

<script>
import BadgeDeleteBox from '@/components/badge-delete-box'

export default {
    /**
     * 数据格式 [{name: "name"}]
     */
    name: 'AddLabel',
    components: {
        BadgeDeleteBox
    },
    model: {
        prop: 'nameList',
        event: 'change'
    },
    props: {
        placeholder: {
            type: String,
            default: '您可以输入：行业、奖项、项目周期、大客户、成果等标签。按回车或点击添加标签确认'
        },
        nameList: {
            type: Array,
            required: true
        },
        isIcon: {
            type: String,
            default: () => {
                return ''
            }
        },
        max: {
            type: Number,
            default: () => {
                return 50
            }
        },
        minLabel: {
            type: Number,
            default: () => {
                return 0
            }
        },
        maxLength: {
            type: Number,
            default: () => {
                return 100
            }
        },
        isShow: {
            type: Boolean,
            default: () => {
                return false
            }
        },
        tipText: {
            type: String,
            default: '准确的标签可以让你的案例获得更多曝光,至少2个字,最多10个字,最多5个标签'
        }
    },
    data () {
        return {
            name: ''
        }
    },
    created () {},
    mounted () {},
    methods: {
        deleteItem (list) {
            this.$emit('change', list)
        },
        addLabel () {
            if (this.name.length < this.minLabel) {
                return this.$message.error(`单个标签的字数不低于${this.minLabel}个`)
            }
            if (this.nameList.length >= this.max) {
                return this.$message.error(`最多只能添加${this.max}个标签`)
            }
            if (this.name && !this.name.match(/^[ ]*$/)) {
                const index = this.nameList.findIndex(item => item.name === this.name)
                if (index === -1) {
                    const list = this.nameList.concat()
                    list.push({
                        name: this.name
                    })
                    this.$emit('change', list)
                    this.name = ''
                } else {
                    this.name = ''
                }
            }
        }
    }
}
</script>

<style scoped lang="less">
.add-label-input {
    /deep/.ant-input-wrapper {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
        color: rgba(0, 0, 0, 0.65);
        font-size: 14px;
        font-variant: tabular-nums;
        line-height: 1.5;
        list-style: none;
        font-feature-settings: 'tnum', 'tnum';
        position: relative;
        display: table;
        width: 100%;
        border-collapse: separate;
    }
    button {
        border: 1px solid #ccc;
        border-radius: 0;
        min-width: 84px;
        height: 32px;
        color: @primary-color;
        &:hover {
            border-color: @primary-color;
        }
    }
    ::v-deep {
        .ant-input-group-addon {
            border: 0;
            padding: 0;
        }
        .ant-input::-webkit-input-placeholder {
            font-size: 12px;
        }
        .ant-input:-moz-placeholder {
            font-size: 12px;
        }
        .ant-input::-moz-placeholder {
            font-size: 12px;
        }
        .ant-input:-ms-input-placeholder {
            font-size: 12px;
        }
    }
}
.tips {
    font-size: 12px;
    color: #666;
    line-height: 1;
}
</style>
